<script>
import { defineComponent } from "vue";
import TopNavItem from "@/components/top-nav-item.vue";

export default defineComponent({
  components: { TopNavItem },
  data() {
    return {
      topNavItems: [
        {
          name: "我的顺电",
          list: ["我的订单", "我的积分"],
          imgSrc: "",
        },
        {
          name: "家电医院",
          list: [],
          imgSrc: "../assets/image/center.png",
        },
        {
          name: "为你服务",
          list: ["在线服务", "帮助中心", "门店查询", "意见建议"],
          imgSrc: "",
        },
        {
          name: "更多精选",
          list: ["清仓折扣", "新品"],
          imgSrc: "",
        },
        {
          name: "手机顺电",
          list: ["扫一扫，下载顺电APP"],
          imgSrc: "../assets/image/ercode.png",
        },
      ],
    };
  },
});
</script>

<template>
  <div>
    <img src="../../assets/image/top.jpg" class="top-img" />
    <div class="top">
      <div class="currentCity">
        <img src="../../assets/image/locationIcon.png" alt="" />
        <span>深圳市</span>
      </div>
      <ul class="top-nav">
        <li><a href="#" style="color: red">顺电招聘</a></li>
        <top-nav-item
          v-for="item in topNavItems"
          :key="item"
          :item="item"
        ></top-nav-item>
        <li><a href="#">品牌入驻</a></li>
        <li><a href="#">仓库招租</a></li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss">
.top-img {
  width: 100%;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 30px;
  background-color: rgb(245, 245, 245);
  .currentCity {
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .top-nav {
    width: 720px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
    a {
      font-size: 13px;
      text-decoration: none;
      color: gray;
    }
  }
}
</style>
